import  React from 'react'
import './css/login.less'
import logo from './imgs/logo.png'
import { Form, Icon, Input, Button,Message } from 'antd';



import  {connect} from 'react-redux'


import  {Redirect} from 'react-router-dom'

import  {reqLogin} from '../../api/index'


import  { createSaveUserInfoAction} from '../../redux/action_creators/login_action'

const { Item } = Form





class Login extends React.Component {
    /*
                      用户名/密码的的合法性要求
                        1). 必须输入
                        2). 必须大于等于4位
                        3). 必须小于等于12位
                        4). 必须是字母、数字、下划线组成
                      */
    pwdValidator = (rule, value, callback) => {
        //    console.log(rule) // 自定义验证规则
        //    console.log(value)  // 自定义验证获取输入的值
        if (!value) {
            callback('密码不能为空')
        } else if (value.length < 4) {
            callback('密码必须大于等于4位')

        } else if (value.length > 12) {
            callback('密码必须小于等于12位')
        } else if (!/^\w+$/.test(value)) {
            callback('密码必须是字母、数字、下划线组成')
        } else {
            callback()
        }
    }


    //表单提交  
    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields( async (err, values) => {
         //获取用户输入 
         const { username,password} =values
          if (!err) {

            // alert('向服务器发送登录请求')
            console.log('Received values of form: ', values);

            //若用户输入无错误，发送登录请求
            let result= await reqLogin(username,password)
            //从响应中获取 请求状态,错误信息,数据 
            const {status,msg,data}=result
            if(status===0) {

                // 1 服务器返回的user信息,还有token 交由 redux管理 
                this.props.saveUserInfo(data)
                console.log('save')
                //2 跳转到admin 页面
                this.props.history.replace('/admin')
            }else {
                //若登录失败 
                
                Message.warning(msg+'1')
            }


          }else {
            Message.error('用户名或者密码输入有错误')
          }
        });
      }

    render() {
        const { getFieldDecorator } = this.props.form;
        // 从redux中获取用户的登录状态
        
        console.log(this.props)
        const {isLogin} =this.props;
        

        //如果已经登录了,重定向到admin页面
        if(isLogin) {
            return    <Redirect  to ='/admin'  />

        } 



        return (
            <div className='login'>
                <header>
                    <img src={logo} alt="logo" />
                    <h1>商品管理系统</h1>

                </header>

                <section>
                    <h1>用户登录</h1>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Item>

                            {getFieldDecorator('username', {


                                /*
                                        用户名/密码的的合法性要求
                                          1). 必须输入
                                          2). 必须大于等于4位
                                          3). 必须小于等于12位
                                          4). 必须是字母、数字、下划线组成
                                        */
                                rules: [

                                    { required: true, message: '用户名不能为空!' },
                                    { max: 12, message: '用户名不能超过12位!' },
                                    { min: 4, message: '用户名不能小于4位!' },
                                    { pattern: /^\w+$/, message: '用户名必须是字母、数字、下划线组成' }

                                ],
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="Username"
                                />,
                            )}

                        </Item>
                        <Item>

                            {getFieldDecorator('password', {
                                rules: [

                                    { validator: this.pwdValidator }



                                ],
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="Password"
                                />,
                            )}

                        </Item>
                        <Item>

                            <Button type="primary" htmlType="submit" className="login-form-button">  登录</Button>
                        </Item>
                    </Form>
                </section>
            </div>
        )
    }
}



// export default Form.create()(Login);





let mapStateToProps=(state)=>{
    return {
      isLogin:state.userInfo.isLogin  
    }
}

let mapDispatchToProps=(dispatch)=>{
  return {
    saveUserInfo:(data)=>dispatch(createSaveUserInfoAction(data)),
  }
}



//测试例子
// const mapDispatchToProps = (dispatch,ownProps ) => {
//     return {
//       onClick: () => {
//         dispatch({
//           type: 'SET_VISIBILITY_FILTER',
//           filter: ownProps.filter
//         });
//       }
//     };
//   }


export default  connect(mapStateToProps,mapDispatchToProps)(Form.create()(Login))


/* 严重注意：
    1.暴露的根本不是我们定义的Login组件，而是经过加工（包装）的Login组件。
    2.Form.create()调用返回一个函数，该函数加工了Login组件，生成了一个新组件，新组件实例对象的props多了一个强大的form属性，能完成验证。
    3.我们暴露出去的不再是Login，而是通过Login生成的一个新组件。 
*/
// export default Form.create()(Login)

/* 
  总结：
    1. 高阶函数
      定义: 如果函数接收的参数是函数或者返回值是函数
      例子: Promise() / then() / 定时器 / 数组遍历相关方法 / bind() / $() / $.get() / Form.create()
      好处: 更加动态, 更加具有扩展性
      
    2. 高阶组件
      定义: 参数为组件，返回值为新组件的函数
      例子: Form.create()(组件) / withRouter(组件) / connect()(组件)
      与高阶函数的关系?  
          高阶组件是一个特别的高阶函数
          接收的是组件函数, 同时返回新的组件函数
      作用:
          React 中用于复用组件逻辑的一种高级技巧

    Form.create()(Login), 接收一个Form组件, 返回一个新组件
      Form.create = function () {
        const form = 创建一个强大form对象
        return function (FormComponent) {
          return class WrapComponent extends Component {
            render () {
              return <Login form={form}/>
            }
          }
        }
      }
      const LoginWrap = Form.create()(Login)
*/